<!-- 仓库统计 -->
<template>
  <div class="container">
    <div class="cardBox statisticsStyle">
      <leftTree ref="leftTree" :data="treeData" node-key="id" v-show="activeName == '1'" :default-props="{children: 'children',label: 'customerName'}" search-key="customerName" width="200px" :default-expand-keys="defaultExpandKeys" :defalut-expand-all="true" @handleNodeClickAll="handleNodeClick" />

      <leftTree ref="leftTree" :data="treeData" node-key="id" v-show="activeName == '2'" :default-props="{children: 'children',label: 'wmsName'}" search-key="wmsName" width="200px" :default-expand-keys="defaultExpandKeys" :defalut-expand-all="true" @handleNodeClickAll="handleNodeClick" />

      <leftTree ref="leftTree" :data="treeData" node-key="id" v-show="activeName == '3' || activeName == '4'" :default-props="{children: 'children',label: 'classifyName'}" search-key="classifyName" width="200px" :default-expand-keys="defaultExpandKeys" :defalut-expand-all="true" @handleNodeClickAll="handleNodeClick" />
      <el-col id="right-content" class="right-content" :offset="0" :span="18">
        <div class="box-title">
          <el-breadcrumb separator="/" style="line-height:50px;">
            <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-tabs v-model="activeName" type="border-card" tab-position="top" class="statisTab" @tab-click="handClick">
          <el-tab-pane label name="1">
            <span slot="label">
              <i class="el-icon-s-release" /> 库存缺货分析表
            </span>
            <OutOfStockList ref="outOfStockList" :fields="fields.OutOfStockList" />
          </el-tab-pane>
          <el-tab-pane label="库存汇总统计表" name="2">
            <span slot="label">
              <i class="el-icon-s-marketing" /> 库存汇总统计表
            </span>
            <SummaryTable ref="summaryTable" :fields="fields.SummaryTable" />
          </el-tab-pane>
          <el-tab-pane label="库存周转天数" name="3">
            <span slot="label">
              <i class="el-icon-s-marketing" /> 库存周转天数
            </span>
            <InventoryTurnover ref="inventoryTurnover" :fields="fields.InventoryTable" />
          </el-tab-pane>
          <el-tab-pane label="物料收发存统计表" name="4">
            <span slot="label">
              <i class="el-icon-s-marketing" /> 物料收发存统计表
            </span>
            <MaterialReceiptDelivery ref="materialReceiptDelivery" :fields="fields.MaterialTable" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </div>
  </div>
</template>
<script>
import OutOfStockList from './OutOfStockList'
import SummaryTable from './SummaryTable'
import InventoryTurnover from './InventoryTurnover'
import MaterialReceiptDelivery from './MaterialReceiptDelivery'
import leftTree from '@/components/LeftTree'
import { getCustomerListApi, getMaterialClassifyAllApi } from '@/api/public'
export default {
  components: {
    OutOfStockList,
    SummaryTable,
    InventoryTurnover,
    MaterialReceiptDelivery,
    leftTree
  },
  data() {
    return {
      treeData: [],
      defaultExpandKeys: ['-1'],
      breadcrumb: [],
      activeName: '1',
      fields: {
        OutOfStockList: [],
        SummaryTable: [],
        InventoryTable: [],
        MaterialTable: []
      }
    }
  },
  computed: {},
  created() {},
  async mounted() {
    this.initFields()
    if (this.activeName === '1') {
      await this.getList()
    }
  },
  methods: {
    /**
     * @description: 查询所有客户
     * @return {*}
     */
    async getList() {
      this.treeData = []
      this.breadcrumb = ['客户目录']
      const res = await getCustomerListApi()
      if (res?.data.code === 200) {
        this.treeData = [
          { id: '-1', customerName: '客户目录', children: res.data.data }
        ]
      }
    },
    /**
     * @description: 查询所有库房库位
     * @return {*}
     */
    async getWmsList() {
      this.treeData = []
      this.breadcrumb = ['库房库位目录']
      const res = await this.$axios.get('wms/list')
      if (res?.data.code === 200) {
        this.treeData = [
          { id: '-1', wmsName: '库房库位目录', children: res.data.data }
        ]
      }
    },
    /**
     * @description: 获取所有物料分类
     * @return {*}
     */
    async getMaterialData() {
      this.treeData = []
      this.breadcrumb = ['物料分类目录']
      const res = await getMaterialClassifyAllApi()
      this.treeData = [
        { id: '-1', classifyName: '物料分类目录', children: res.data.data }
      ]
    },
    /**
     * @description: 树节点点击
     * @param {*} data
     * @param {*} node
     * @return {*}
     */
    handleNodeClick({ data, node }) {
      let treeStr = ''
      if (this.activeName === '1') {
        this.breadcrumb = []
        this.returnNodeLabel(node.parent)
        this.breadcrumb.push(data.customerName)
        treeStr = data.customerName === '客户目录' ? '-1' : data.customerName
      } else if (this.activeName === '2') {
        this.breadcrumb = []
        this.returnNodeLabel(node.parent)
        this.breadcrumb.push(data.wmsName)
        treeStr = data.wmsName === '库房库位目录' ? '-1' : data.wmsName
      } else {
        this.breadcrumb = []
        this.returnNodeLabel(node.parent)
        this.breadcrumb.push(data.classifyName)
        treeStr =
          data.classifyName === '物料分类目录' ? '-1' : data.classifyName
      }
      if (this.activeName == '1') {
        this.$refs['outOfStockList'].getInfo(treeStr)
      } else if (this.activeName == '2') {
        this.$refs['summaryTable'].getInfo(treeStr)
      } else if (this.activeName == '3') {
        this.$refs['inventoryTurnover'].getInfo(treeStr)
      } else {
        this.$refs['materialReceiptDelivery'].getInfo(treeStr)
      }
    },
    /**
     * @description: 递归获取名称
     * @param {*} node
     * @return {*}
     */
    returnNodeLabel(node) {
      if (node.parent) {
        if (this.activeName === '1') {
          this.breadcrumb.unshift(node.data.customerName)
        } else if (this.activeName === '2') {
          this.breadcrumb.unshift(node.data.wmsName)
        } else {
          this.breadcrumb.unshift(node.data.classifyName)
        }
        this.returnNodeLabel(node.parent)
      }
    },
    initFields() {
      const obj = {
        OutOfStockList: [],
        SummaryTable: [],
        InventoryTable: [],
        MaterialTable: []
      }
      this.fieldList.forEach((item) => {
        item.code.includes('@1') && obj.OutOfStockList.push(item)
        item.code.includes('@2') && obj.SummaryTable.push(item)
        item.code.includes('@3') && obj.InventoryTable.push(item)
        item.code.includes('@4') && obj.MaterialTable.push(item)
      })
      this.fields = obj
    },
    handClick(tab) {
      if (tab.name === '1') {
        this.getList()
        this.$refs['outOfStockList'].getInfo('-1')
      } else if (tab.name === '2') {
        this.getWmsList()
        this.$refs['summaryTable'].getInfo('-1')
      } else if (tab.name === '3') {
        this.$refs['inventoryTurnover'].getInfo('-1')
        this.getMaterialData()
      } else {
        this.$refs['materialReceiptDelivery'].getInfo('-1')
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.container {
  padding: 10px;
}
</style>

<style lang='scss' >
.statisTab {
  .el-tabs__header {
    margin: 0 0 5px;
    .el-tabs__item {
      height: 34px;
      line-height: 34px;
    }
  }
  .el-tabs__content {
    padding: 5px !important;
  }
}
</style>
